<template>
	<view>
		<view class="pagess">
			<uNavbar title="开奖结果" bgColor="#E0DDDA" leftIconColor="333333" :titleStyle="titleStyle" rightText="往期回顾"
				@rightClick="right">
			</uNavbar>
			<view class="botbox">
				<view class="tit">
					中奖号码
				</view>
				<view class="botbox-wrap">
					<view class="botbox-item">
						{{firstDigit}}
					</view>
					<view class="botbox-item">
						{{secondDigit}}
					</view>
					<view class="botbox-item2" v-if="thirdDigit">
						{{thirdDigit}}
					</view>
				</view>
				<view class="kaijiang flex_c">
					<text>{{phoneInfo.lottery_number_value}}</text>
				</view>
				<view class="yukpmh">
					<text>中奖规则：前两位号码一致即为中奖</text>
				</view>
			</view>
			<view class="pin_phone flex_ZC">
				<image class="bg_phone" :src="phoneInfo.phone_cover" mode="aspectFill"></image>
				<view class="phone_center flex_ZC">
					<text class="ph_name">{{phoneInfo.phone_name}}</text>
					<view class="xingyun_box flex_ld">
						<text class="f28 c6">幸运机主:</text>
						<text class="xingyun" v-for="(item,index) in winNumberList.slice(0,3)" :key="index">{{item.nickname}} </text>
						<text>...</text>
					</view>
				</view>
			</view>

			<view class="result flex_ZC">
				<text class="result_tit">我的开奖结果</text>
				<text v-if="phoneInfo.member_status==-1" class="f30 c6">您未参与本期配号抽签</text>
				<text v-if="phoneInfo.member_status==0" class="f30 c6">您未中签，期待下次参与</text>
				<text v-if="phoneInfo.member_status==1 ||phoneInfo.member_status==6" class="f30 c6">恭喜中签，请与客服联系</text>
			</view>
			<view class="tip_btn flex_c" @click="goChooseCar">
				<text>好的</text>
			</view>
			<view class="empty"></view>
		</view>
	</view>
</template>

<script>
	import {phoneIndexInfo,lastLotteryRecord} from '../../api/myphone.js'
	export default {
		data() {
			return {
				firstDigit: "",
				secondDigit: "",
				thirdDigit: "",
				phoneInfo: {},
				winNumberList: [],
				activeShow: false,
				installmentId: null,
				titleStyle: {
					color: '#333333'
				},
			}
		},
		onLoad(e) {
			console.log(e);
			// this.activeShow = e.activeShow
			// this.installmentId = e.installmentId
			this.initRecord()

		},
		methods: {
			right() {
				uni.navigateTo({
					url: "/pagesMy/nationalPhonePooling/previousReview?id=" + this.phoneInfo.id
				})
			},
			initRecord() {
				lastLotteryRecord().then(res => {
					console.log(res);
					if (res.code == 1) {
						this.phoneInfo = res.data
						this.winNumberList = res.data.winning_members

						let numberStr = res.data.winning_number
						// 使用 split 方法将字符串转为数组
						let digitsArray = numberStr.split('');
						// 分别将每一位数字存入不同的变量
						let [firstDigit, secondDigit, thirdDigit] = digitsArray;
						this.firstDigit = firstDigit,
							this.secondDigit = secondDigit
						this.thirdDigit = thirdDigit
					}
				})
			},

			allJump(e) {
				let {
					url
				} = e.currentTarget.dataset
				uni.navigateTo({
					url: url
				})
			},
			goChooseCar() {
				uni.navigateBack()
			}
		},
	}
</script>

<style scoped lang="scss">
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}

	.pagess {
		width: 100%;
		min-height: 100vh;
		background: #E0DDDA;
	}

	.botbox {
		width: 690rpx;
		min-height: 326rpx;
		background: #f2f2f2;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		padding-top: 24rpx;

		.tit {
			width: 690rpx;
			text-align: center;
			font-weight: 400;
			font-size: 52rpx;
			font-family: iconfont2;
			background: linear-gradient(180deg, #A68A64, #A68A6450);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.botbox-wrap {
			width: 690rpx;
			display: flex;
			justify-content: space-around;
			margin-top: 20rpx;
			font-family: 'iconfont2';

			.botbox-item {
				width: 158rpx;
				height: 182rpx;
				background: #A68A64;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				font-family: iconfont2;
				font-size: 200rpx;
				text-align: center;
				line-height: 182rpx;
				color: #fff;
			}
			.botbox-item2 {
				width: 158rpx;
				height: 182rpx;
				background: #A68A64;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				font-family: iconfont2;
				font-size: 200rpx;
				text-align: center;
				line-height: 182rpx;
				color: #ffffff;
			}
		}
	}

	.kaijiang {
		width: 100%;
		font-size: 28rpx;
		color: #ffffff90;
		padding: 20rpx 0;
	}
	.yukpmh{
		margin-left: 36rpx;
		color: #A68A64;
		padding-bottom: 20rpx;
	}

	.pin_phone {
		position: relative;
		width: 690rpx;
		background: #F2F2F2;
		border-radius: 20rpx;
		padding-bottom: 20rpx;
		margin: 30rpx auto;
	}

	.bg_phone {
		width: 100%;
		height: 450rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.phone_center {
		color: #333333;
	}

	.ph_name {
		font-size: 40rpx;
		color: #333333;
		font-family: 'iconfont2';
		margin: 20rpx 0 10rpx;
	}

	.ph_jd {
		font-size: 48rpx;
		color: #A68A64;
		font-family: 'iconfont2';
		margin-top: 20rpx;
	}
	.xingyun_box{
		width: 100%;
	}
	.xingyun{
		font-size: 28rpx;
		color: #333333;
		margin: 0 6rpx;
	}

	.result {
		width: 690rpx;
		height: 194rpx;
		margin: 30rpx auto;
		background: #f2f2f2;
		border-radius: 10rpx;
	}

	.result_tit {
		font-family: 'iconfont2';
		font-size: 46rpx;
		margin-top: 20rpx;
		color: #A68A64;
	}

	.tips {
		width: 690rpx;
		margin: 30rpx auto;
		color: #333333;
	}

	.tips>text:nth-child(2) {
		color: #333333;
	}

	.tip_btn {
		width: 690rpx;
		padding: 20rpx 0;
		margin: 30rpx auto;
		color: #ffffff;
		font-size: 36rpx;
		background: #A68A64;
		border-radius: 40rpx;
	}

	/deep/ .u-navbar__content__right__text {
		color: #333333;
	}
</style>